<template>
	<div class="goods_detail">
		<el-form inline ref="ruleFormRef" :model="formData" :rules="rules" label-width="150px">
			<el-row>
				<el-col :span="24">
					<el-row>
						<el-col :span="20">
							<el-form-item prop="id" label="商品" style="width: 100%">
								<el-input v-model="formData.name" clearable style="width: 100%"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-button style="margin-left: 10px" type="success" @click="onShowModal">选择商品</el-button>
						</el-col>
					</el-row>
				</el-col>
				<el-col :span="24">
					<el-form-item prop="commissionRate" label="佣金比列" style="width: 100%">
						<el-input v-model="formData.commissionRate" clearable style="width: 100%"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<ProdTreeSelector v-model="dialogVisible" :keyword="formData.name" @getSkuList="getSkuList" />
		<el-table :data="formData.selectProductList" style="width: 100%">
			<el-table-column label show-overflow-tooltip width="50px">
				<template #default="scope">
					<el-checkbox v-model="scope.row.isChecked" @change="handleCheckedCitiesChange" label></el-checkbox>
				</template>
			</el-table-column>
			<el-table-column prop="orderNumber" label="序号" show-overflow-tooltip width="80px"></el-table-column>
			<el-table-column prop="name" label="商品名称" show-overflow-tooltip></el-table-column>
			<el-table-column label="商品图片" width="100" show-overflow-tooltip>
				<template #default="scope">
					<img width="60" :src="scope.row.imgUrl" alt="" />
					<!-- <el-image lazy :src="scope.row.imgUrl" :preview-src-list="srcList" :initial-index="scope.$index"></el-image> -->
				</template>
			</el-table-column>
			<el-table-column label="商品原价" show-overflow-tooltip>
				<template #default="scope">
					<span v-html="scope.row.originalPrice"></span>
				</template>
			</el-table-column>
			<el-table-column prop="sku" label="自编SKU" show-overflow-tooltip></el-table-column>
			<el-table-column label="操作">
				<template #default="scope">
					<el-button type="danger" icon="Delete" circle @click="onDeleteProduct(scope.row)" />
				</template>
			</el-table-column>
		</el-table>
		<!-- <el-dialog title="选择商品" v-model="isShowModal" width="60%" destroy-on-close>
			
			<GoodsListModal ref="goodsListModalRef" />
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancelModal" size="default">取消</el-button>
					<el-button type="primary" @click="onSubmitGoodsListItem(goodsListModalRef)" size="default">确认</el-button>
				</span>
			</template>
		</el-dialog> -->
	</div>
</template>
<script setup>
import { useProductApi } from '/@/api/product';
const { getProdById } = useProductApi();
import ProdTreeSelector from '/@/components/common/prodTreeSelector/ProdTreeSelector.vue';
import useServiceState from '/@/utils/pageState/serviveState';
import GoodsListModal from './GoodsListModal.vue';

const { getPriceByField, MAX_LENGTH } = useServiceState();
const goodsListModalRef = ref();
const dialogVisible = ref(false);
const isShowModal = ref(false);
const formData = ref({
	commissionRate: '',
	selectProductList: [],
});
const rules = {
	commissionRate: [{ required: true, trigger: 'blur', message: '请输入佣金比列' }],
};
const ruleForm = ref({});

const handleCheckedCitiesChange = (val) => {
	console.log(val);
	// let productList = formData.value.selectProductList;
	// let checkedCount = 0;
	// productList.map((item) => {
	// 	if (item.isChecked) {
	// 		checkedCount++;
	// 	}
	// });
	// checkAll.value = checkedCount === productList.length;
	// isIndeterminate.value = checkedCount > 0 && checkedCount < productList.length;
};

const duplicateRemovalById = (list) => {
	if (list.length === 0) {
		return [];
	}
	let newList = [];
	for (let i = 0; i < list.length; i++) {
		for (var j = i + 1; j < list.length; j++) {
			if (list[i].id == list[j].id) {
				++i;
			}
		}
		newList.push(list[i]);
	}
	return newList;
};

const getSkuList = (skuList) => {
	let tempSelectProductList = [];
	tempSelectProductList = skuList.map((ceil, index) => {
		return {
			id: ceil.id,
			isChecked: false,
			orderNumber: formData.value.selectProductList.length + index + 1,
			name: ceil.productName,
			imgUrl: ceil.pic,
			originalPrice:
				getPriceByField(ceil.euPrice, 'euPrice') +
				'<br/>' +
				getPriceByField(ceil.ukPrice, 'ukPrice') +
				'<br/>' +
				getPriceByField(ceil.usPrice, 'usPrice'),
			sku: ceil.skuCode,
			frequency: MAX_LENGTH,
		};
	});
	formData.value.selectProductList = [...formData.value.selectProductList, ...tempSelectProductList];
	formData.value.selectProductList = duplicateRemovalById(formData.value.selectProductList);
};

const onShowModal = () => {
	dialogVisible.value = true;
	isShowModal.value = true;
};

const onCancelModal = () => {
	dialogVisible.value = false;
};

const onSubmitGoodsListItem = (goodsEl) => {
	console.log('0=====', goodsEl.goodsInfo);
	const { productId, productName, commissionRate } = goodsEl.goodsInfo;
	formData.value.name = productName;
	formData.value.commissionRate = commissionRate;
	getGoodsDetail(productId);
	isShowModal.value = false;
};

const getGoodsDetail = async (id) => {
	let res = await getProdById(id);
	if (res.code !== 200) return;
	const { spData, albumPics, description, dimensionList, ...data } = res.data;
	let specificationList = [];
	const specificationDetail = JSON.parse(spData) || [];
	specificationDetail.forEach((item) => {
		specificationList.push({ name: item.name });
	});
	ruleForm.value = {
		...data,
		albumPicsArr: JSON.parse(albumPics),
		descriptionArr: JSON.parse(description),
		specificationDetail,
		specificationList,
		dimensionList: dimensionList || [],
	};
};

onMounted(() => {});

defineExpose({
	formData,
	ruleForm,
});
</script>
<style lang=""></style>
